<template>
    <div class="${lowBusinessName}Mng">
        <el-row :gutter="10">
            <el-col :span="24">
                <el-card class="condition-card">
                    <span>
                        <i class="el-icon-search"></i> 查询条件: </span>
                    <hr class="split" />
                    <div class="card-context">
                    	<#list conditionRows as row>
                        <el-row :gutter="20">
							<#list row as field>
							<#if field.type ?? && (field.type =="input" || field.type =="textarea")>
                            <el-col :span="2">
                                ${field.chnName}:
                            </el-col>
                            <el-col :span="3">
                                <el-input v-model="condition.${field.fieldName}" size="small"<#if field.maxLen ?? && (field.maxLen>0)> maxlength="${field.maxLen}"</#if>> </el-input>
                            </el-col>
							<#elseif field.type ?? && field.type =="select">
                            <el-col :span="2">
                                ${field.chnName}:
                            </el-col>
                            <el-col :span="3">
                                <el-select v-model="condition.${field.fieldName}" size="small" clearable style="width:100%">
									<#list field.selectItems as option>
                                    <el-option label="${option.dsp}" value="${option.value}"></el-option>
									</#list>
                                </el-select>
                            </el-col>
							<#elseif field.type ?? && field.type =="date">
                            <el-col :span="2">
                                ${field.chnName}:
                            </el-col>
                            <el-col :span="3">
                                <el-date-picker v-model="condition.${field.fieldName}" size="small" type="date" value-format="timestamp" style="width:100%">
                                </el-date-picker>
                            </el-col>
							<#elseif field.type ?? && field.type =="datetime">
                            <el-col :span="2">
                                ${field.chnName}:
                            </el-col>
                            <el-col :span="3">
                                <el-date-picker v-model="condition.${field.fieldName}" size="small" type="datetime" value-format="timestamp" style="width:100%">
                                </el-date-picker>
                            </el-col>
							</#if>
							</#list>							
							<#if row_index == 0>
                            <el-col :span="2">
                                <el-button type="primary" size="small" icon="el-icon-search" @click="query">查询</el-button>
                            </el-col>
                            </#if>
                        </el-row>
                        </#list>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="24">
                <el-card class="list-card">
                    <span>
                        <i class="el-icon-tickets"></i> 列表: </span>
                    <hr class="split" />
                    <div class="card-context">
                        <el-table :data="retList" border style="width: 100%" ref="retTable" highlight-current-row @current-change="selectOne" height="386">
							<#list tableFields as field>
							<#if field.globalDefine ?? && field.globalDefine != "">
                            <el-table-column prop="${field.fieldName}_G" label="${field.chnName}" width="150"></el-table-column>
							<#elseif field.type=="date" || field.type=="datetime">
                            <el-table-column prop="${field.fieldName}_T" label="${field.chnName}" width="160"></el-table-column>
                            <#else>
                            <el-table-column prop="${field.fieldName}" label="${field.chnName}" width="150"></el-table-column>
							</#if>
							</#list>
                        </el-table>
                        <div class="pagination">
                            <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="page.pageSize" :total="page.total" :page-count="page.pageCount" :current-page="page.currentPage" :page-sizes="[10, 50, 100]">
                            </el-pagination>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="增加${chnBusinessName}" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addInfo" :rules="addRules" ref="addForm" :label-position="labelPosition" label-width="120px">
                <el-card>
                    <span>
                        <i class="el-icon-edit"></i> ${chnBusinessName}信息:</span>
                    <hr class="split" />
                    <div class="card-context">
                        <el-row :gutter="10">
                            <el-col :span="10">
								<#list addFormFieldsL as field>
								<#if field.type ?? && field.type =="input">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-input v-model<#if field.javaType=="Integer">.number</#if>="addInfo.${field.fieldName}" size="small"<#if field.maxLen ?? && (field.maxLen>0)> maxlength="${field.maxLen}"</#if>></el-input>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="select">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-select v-model<#if field.javaType=="Integer">.number</#if>="addInfo.${field.fieldName}" size="small" clearable style="width:100%">
										<#list field.selectItems as option>
                                        <el-option label="${option.dsp}" value="${option.value}"></el-option>
										</#list>
                                    </el-select>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="date">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-date-picker v-model="addInfo.${field.fieldName}" size="small" type="date" value-format="timestamp" style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="datetime">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-date-picker v-model="addInfo.${field.fieldName}" size="small" type="datetime" value-format="timestamp" style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="textarea">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-input v-model="addInfo.${field.fieldName}" type="textarea" autosize<#if field.maxLen ?? && (field.maxLen>0)> maxlength="${field.maxLen}"</#if>></el-input>
                                </el-form-item>
								</#if>
								</#list>
                            </el-col>
                            <el-col :span="10" :offset="1">
								<#list addFormFieldsR as field>
								<#if field.type ?? && field.type =="input">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-input v-model<#if field.javaType=="Integer">.number</#if>="addInfo.${field.fieldName}" size="small"<#if field.maxLen ?? && (field.maxLen>0)> maxlength="${field.maxLen}"</#if>></el-input>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="select">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-select v-model<#if field.javaType=="Integer">.number</#if>="addInfo.${field.fieldName}" size="small" clearable style="width:100%">
										<#list field.selectItems as option>
                                        <el-option label="${option.dsp}" value="${option.value}"></el-option>
										</#list>
                                    </el-select>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="date">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-date-picker v-model="addInfo.${field.fieldName}" size="small" type="date" value-format="timestamp" style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="datetime">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-date-picker v-model="addInfo.${field.fieldName}" size="small" type="datetime" value-format="timestamp" style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="textarea">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-input v-model="addInfo.${field.fieldName}" type="textarea" autosize<#if field.maxLen ?? && (field.maxLen>0)> maxlength="${field.maxLen}"</#if>></el-input>
                                </el-form-item>
								</#if>
								</#list>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-form>
            <div slot="footer">
                <el-button type="primary" size="small" icon="el-icon-check" @click="add">确 定</el-button>
                <el-button size="small" icon="el-icon-close" @click="addFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改${chnBusinessName}" :visible.sync="updateFormVisible" :close-on-click-modal="false">
            <el-form :model="updateInfo" :rules="updateRules" ref="updateForm" :label-position="labelPosition" label-width="120px">
                <el-card>
                    <span>
                        <i class="el-icon-edit"></i> ${chnBusinessName}信息:</span>
                    <hr class="split" />
                    <div class="card-context">
                        <el-row :gutter="10">
                            <el-col :span="10">
								<#list updateFormFieldsL as field>
								<#if field.type ?? && field.type =="input">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-input v-model<#if field.javaType=="Integer">.number</#if>="updateInfo.${field.fieldName}" size="small"<#if field.maxLen ?? && (field.maxLen>0)> maxlength="${field.maxLen}"</#if><#if field.isPK ?? && (field.isPK == "Y")> readonly</#if>></el-input>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="select">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-select v-model<#if field.javaType=="Integer">.number</#if>="updateInfo.${field.fieldName}" size="small" clearable style="width:100%">
										<#list field.selectItems as option>
                                        <el-option label="${option.dsp}" value="${option.value}"></el-option>
										</#list>
                                    </el-select>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="date">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-date-picker v-model="updateInfo.${field.fieldName}" size="small" type="date" value-format="timestamp" style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="datetime">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-date-picker v-model="updateInfo.${field.fieldName}" size="small" type="datetime" value-format="timestamp" style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="textarea">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-input v-model="updateInfo.${field.fieldName}" type="textarea" autosize<#if field.maxLen ?? && (field.maxLen>0)> maxlength="${field.maxLen}"</#if>></el-input>
                                </el-form-item>
								</#if>
								</#list>
                            </el-col>
                            <el-col :span="10" :offset="1">
								<#list updateFormFieldsR as field>
								<#if field.type ?? && field.type =="input">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-input v-model<#if field.javaType=="Integer">.number</#if>="updateInfo.${field.fieldName}" size="small"<#if field.maxLen ?? && (field.maxLen>0)> maxlength="${field.maxLen}"</#if>></el-input>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="select">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-select v-model<#if field.javaType=="Integer">.number</#if>="updateInfo.${field.fieldName}" size="small" clearable style="width:100%">
										<#list field.selectItems as option>
                                        <el-option label="${option.dsp}" value="${option.value}"></el-option>
										</#list>
                                    </el-select>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="date">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-date-picker v-model="updateInfo.${field.fieldName}" size="small" type="date" value-format="timestamp" style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="datetime">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-date-picker v-model="updateInfo.${field.fieldName}" size="small" type="datetime" value-format="timestamp" style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
								<#elseif field.type ?? && field.type =="textarea">
                                <el-form-item label="${field.chnName}:" prop="${field.fieldName}">
                                    <el-input v-model="updateInfo.${field.fieldName}" type="textarea" autosize<#if field.maxLen ?? && (field.maxLen>0)> maxlength="${field.maxLen}"</#if>></el-input>
                                </el-form-item>
								</#if>
								</#list>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-form>
            <div slot="footer">
                <el-button type="primary" size="small" icon="el-icon-check" @click="update">确 定</el-button>
                <el-button size="small" icon="el-icon-close" @click="updateFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-row class="cmd">
            <el-col>
                <el-button type="primary" size="small" icon="el-icon-k-add" @click="editForm('ADD')">增加</el-button>
                <el-button type="primary" size="small" icon="el-icon-edit" @click="editForm('UPDATE')" :disabled="isDisabled">修改</el-button>
                <el-button type="danger" size="small" icon="el-icon-delete" @click="del" :disabled="isDisabled">删除</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data () {
        return {
            condition: {},
            retList: [],
            page: {
                pageSize: 10,
                total: 0,
                pageCount: 0,
                currentPage: 1
            },
            selectedInfo: {},
            addInfo: {},
            addRules: {
            	<#list addInFields as field>
                ${field.fieldName}: [
            		<#list field.rules as rule>
					<#if rule.type =="nullable" && rule.value == "N">
                    { required: true, message: '请输入${field.chnName}', trigger: '<#if field.type=="select">change<#else>blur</#if>' }<#if rule_has_next>,</#if>
					<#elseif rule.type == "length">
                    { <#if rule.minLen ??>min: ${rule.minLen}, </#if><#if rule.maxLen ??>max: ${rule.maxLen}, </#if>message: '<#if rule.maxLen ??>最大长度${rule.maxLen}</#if><#if rule.minLen ??>最小长度${rule.minLen}</#if>', trigger: '<#if field.type=="select">change<#else>blur</#if>' }<#if rule_has_next>,</#if>
					<#elseif rule.type == "number">
                    { type: 'number', message: '请输入数字', trigger: '<#if field.type=="select">change<#else>blur</#if>' }<#if rule_has_next>,</#if>
                    <#elseif rule.type == "range">
                    { type: 'number',<#if rule.min ??> min: ${rule.min},</#if><#if rule.max ??> max: ${rule.max},</#if> message: '<#if rule.max ??>最大值${rule.max}</#if><#if rule.min ??>最小值${rule.min}</#if>', trigger: '<#if field.type=="select">change<#else>blur</#if>' }<#if rule_has_next>,</#if>
                    </#if>
                    </#list>
                ],
            	</#list>
            },
            addFormVisible: false,
            updateInfo: {},
            updateRules: {
            	<#list updateInFields as field>
                ${field.fieldName}: [
            		<#list field.rules as rule>
					<#if rule.type =="nullable" && rule.value == "N">
                    { required: true, message: '请输入${field.chnName}', trigger: '<#if field.type=="select">change<#else>blur</#if>' }<#if rule_has_next>,</#if>
					<#elseif rule.type == "length">
                    { <#if rule.minLen ??>min: ${rule.minLen}, </#if><#if rule.maxLen ??>max: ${rule.maxLen},</#if> message: '<#if rule.maxLen ??>最大长度${rule.maxLen}</#if><#if rule.minLen ??>最小长度${rule.minLen}</#if>', trigger: '<#if field.type=="select">change<#else>blur</#if>' }<#if rule_has_next>,</#if>
					<#elseif rule.type == "number">
                    { type: 'number', message: '请输入数字', trigger: '<#if field.type=="select">change<#else>blur</#if>' }<#if rule_has_next>,</#if>
                    <#elseif rule.type == "range">
                    { type: 'number',<#if rule.min ??> min: ${rule.min},</#if><#if rule.max ??> max: ${rule.max},</#if> message: '<#if rule.max ??>最大值${rule.max}</#if><#if rule.min ??>最小值${rule.min}</#if>', trigger: '<#if field.type=="select">change<#else>blur</#if>' }<#if rule_has_next>,</#if>
                    </#if>
                    </#list>
                ],
            	</#list>
            },
            updateFormVisible: false,
            isDisabled: true,
            labelPosition: 'left'
        }
    },
    created () {
        this.init()
        this.query()
    },
    methods: {
        queryPage () {
            let self = this
            var input = {
                ${queryIn}: [self.condition],
                SYPAGEINFOY: [self.page]
            }
            self.$http
                .post('${queryPageUrl}', input)
                .then((res) => {
                    var pkgOut = res.data
                    self.retList = pkgOut.${queryOut}
                    <#if hasDateTimeOrDate>
                    for (let index = 0; index < pkgOut.${queryOut}.length; index++) {
                        const element = pkgOut.${queryOut}[index];
                        <#list tableFields as field>
                        <#if field.type == "datetime">
                        if (element.${field.fieldName} != null) {
                            element.${field.fieldName}_T = self.$moment(Number(element.${field.fieldName})).format('YYYY-MM-DD HH:mm:ss')
                        }
                        <#elseif field.type == "date">
                        if (element.${field.fieldName} != null) {
                            element.${field.fieldName}_T = self.$moment(Number(element.${field.fieldName})).format('YYYY-MM-DD')
                        }
                        </#if>
                        </#list>
                    }                    
                    </#if>
                    self.page = pkgOut.SYPAGEINFOY[0]
                })
                .catch((err) => {
                    self.$alert(err, '提示', {
                        confirmButtonText: '确定',
                        type: 'error'
                    })
                })
        },
        query () {
            this.page = {
                pageSize: 10,
                total: 0,
                pageCount: 0,
                currentPage: 1
            }
            this.queryPage();
        },
        handleSizeChange (pageSize) {
            let self = this
            self.page.pageSize = pageSize
            self.page.currentPage = 1
            self.queryPage()
        },
        handleCurrentChange (currentPage) {
            let self = this
            self.page.currentPage = currentPage
            self.queryPage()
        },
        selectOne (val) {
            this.selectedInfo = val
            if (val == null) {
                this.isDisabled = true
            } else {
                this.isDisabled = false
                <#list tableFields as field>
                <#if field.javaType="Integer">
                this.selectedInfo.${field.fieldName}=Number(val.${field.fieldName})
                <#elseif field.javaType="BigDecimal">
                this.selectedInfo.${field.fieldName}=new BigDecimal(val.${field.fieldName})
                </#if>
                </#list>
            }
        },
        editForm (formType) {
            let self = this
            if (formType === 'ADD') {
                self.addInfo = {}
                self.addFormVisible = true
            } else if (formType === 'UPDATE') {
                if (self.selectedInfo == null) {
                    self.$alert('请选择一条记录', '提示', {
                        confirmButtonText: '确定',
                        type: 'error'
                    })
                    self.isDisabled = true
                    return
                }
                self.updateInfo = JSON.parse(JSON.stringify(self.selectedInfo))
                self.updateFormVisible = true
            } else {
                console.log('表单类型错误')
                self.$alert('表单类型错误', '提示', {
                    confirmButtonText: '确定',
                    type: 'error'
                })
                return
            }
        },
        add () {
            let self = this
            let validRet = false
            self.$refs['addForm'].validate((valid) => {
                validRet = valid
            })
            if (validRet == false) {
                return
            }
            <#if hasDateTimeOrDate>
            <#list tableFields as field>
            <#if field.type == "datetime" || field.type == "date">
            if (self.addInfo.${field.fieldName} === null) {
                self.addInfo.${field.fieldName} = ''
            }
            </#if>
            </#list>
            </#if>
            let input = {
                ${addIn}: [self.addInfo]
            }
            self.$http
                .post('${addUrl}', input)
                .then((res) => {
                    let pkgOut = res.data
                    self.init()
                    self.query()
                    self.$message({
                        message: '增加信息成功',
                        type: 'success'
                    })
                })
                .catch((err) => {
                    self.$alert(err, '提示', {
                        confirmButtonText: '确定',
                        type: 'error'
                    })
                })
        },
        update () {
            let self = this
            let validRet = false
            self.$refs['updateForm'].validate((valid) => {
                validRet = valid
            })
            if (validRet == false) {
                return
            }
            <#if hasDateTimeOrDate>
            <#list tableFields as field>
            <#if field.type == "datetime" || field.type == "date">
            if (self.updateInfo.${field.fieldName} === null) {
                self.updateInfo.${field.fieldName} = ''
            }
            </#if>
            </#list>
            </#if>
            let input = {
                ${updateIn}: [self.updateInfo]
            }
            self.$http
                .post('${updateUrl}', input)
                .then((res) => {
                    let pkgOut = res.data
                    self.init()
                    self.query()
                    self.$message({
                        message: '修改信息成功',
                        type: 'success'
                    })
                })
                .catch((err) => {
                    self.$alert(err, '提示', {
                        confirmButtonText: '确定',
                        type: 'error'
                    })
                })
        },
        del () {
            let self = this
            self.$confirm('是否删除${chnBusinessName}?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                let input = {
                    ${deleteIn}: [self.selectedInfo]
                }
                self.$http
                    .post('${deleteUrl}', input)
                    .then((res) => {
                        let pkgOut = res.data
                        self.init()
                        self.query()
                        self.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    })
                    .catch((err) => {
                        self.$alert(err, '提示', {
                            confirmButtonText: '确定',
                            type: 'error'
                        })
                    })
            }).catch((erro) => {
            })
        },
        init () {
            this.addInfo = {}
            this.updateInfo = {}
            this.selectedInfo = {}
            this.isDisabled = true
            this.addFormVisible = false
            this.updateFormVisible = false
        }
    }
}
</script>
<style scoped>
</style>